import 'package:flutter/material.dart';

/// row column 交叉轴要实际使用时测试
class RowAndColumnDemo extends StatelessWidget {
  const RowAndColumnDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: Column(
          children: [
            Text("Row - MainAxisAlignment.spaceAround"),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item1"),
                ),
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item2"),
                ),
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item3"),
                ),
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Text("Row - MainAxisAlignment.spaceBetween"),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item1"),
                ),
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item2"),
                ),
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Text("Row - MainAxisAlignment.spaceEvenly"),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item1"),
                ),
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item2"),
                ),
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Text("Row - MainAxisAlignment.end"),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item1"),
                ),
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item2"),
                ),
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Text("Row - MainAxisAlignment.start"),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item1"),
                ),
                Container(
                  color: Colors.red,
                  alignment: Alignment.center,
                  child: Text("Item2"),
                ),
              ],
            ),
            SizedBox(
              height: 35,
            ),
            Text("Column - MainAxisAlignment.spaceAround"),
            Container(
              height: 300,
              color: Colors.yellow,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Container(child: Text("Title")),
                  Container(child: Text("SubTitle")),
                  Container(child: Text("Content")),
                  Container(child: Text("Left-btn")),
                  Container(child: Text("Right-btn")),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            Text("Column - MainAxisAlignment.spaceBetween"),
            Container(
              height: 300,
              color: Colors.yellow,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(child: Text("Title")),
                  Container(child: Text("SubTitle")),
                  Container(child: Text("Content")),
                  Container(child: Text("Left-btn")),
                  Container(child: Text("Right-btn")),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            Text("Column - MainAxisAlignment.spaceEvenly"),
            Container(
              height: 300,
              color: Colors.yellow,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Container(child: Text("Title")),
                  Container(child: Text("SubTitle")),
                  Container(child: Text("Content")),
                  Container(child: Text("Left-btn")),
                  Container(child: Text("Right-btn")),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            Text("Column - MainAxisAlignment.start"),
            Container(
              height: 300,
              color: Colors.yellow,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(child: Text("Title")),
                  Container(child: Text("SubTitle")),
                  Container(child: Text("Content")),
                  Container(child: Text("Left-btn")),
                  Container(child: Text("Right-btn")),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            Text("Column - MainAxisAlignment.end"),
            Container(
              height: 300,
              color: Colors.yellow,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(child: Text("Title")),
                  Container(child: Text("SubTitle")),
                  Container(child: Text("Content")),
                  Container(child: Text("Left-btn")),
                  Container(child: Text("Right-btn")),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            Text("Column - MainAxisAlignment.center"),
            Container(
              height: 300,
              color: Colors.yellow,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(child: Text("Title")),
                  Container(child: Text("SubTitle")),
                  Container(child: Text("Content")),
                  Container(child: Text("Left-btn")),
                  Container(child: Text("Right-btn")),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
